import React from 'react';
// import '../../static/tero/common.less';
// import '../../static/tero/circle.less'
import Otheraddfour from './otheraddfour.jsx';
import u from '../../common.js'
import '../../static/tero/postbar.less';
import '../../static/tero/otheraddfour.less';
import { Input } from 'antd';



class SkypeCommon extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: [],
            flag: true,
            index: 0,
            base: [{ comments: [1] }, { comments: [1] }, { comments: [1] }, { comments: [1] }],
            block: 0,
            myname: '',
            mynumber: 11,
            filter: [],
            bgc: 0,
            comments: [],
        }
    }

    componentWillMount() {
        this.getNameList()

    }
    getValue(val) {
        u.addAPPsearch({ keyWord: val }, data => {
            let list = data.data
            list.forEach((item) => {
                item.flag = false
                item.comments = [1, 1]
            })
            let arr = list
            this.setState((prevState, props) => ({
                base: arr,
            }))
        })
    }
    open(index, id) {
        let arr = this.state.base.slice(0)
        if (!arr[index].flag) {
            switch (this.props.skype) {
                case 1:
                    u.skypeten({ id: id }, data => {
                        getTen(data)
                    })
                    break
                case 2:
                    u.getLine({ id: id }, data => {
                        getTen(data)
                    })

                    break
                case 3:
                    u.whatsappten({ id: id }, data => {
                        getTen(data)
                    })
                    break
                case 4:
                    u.getViber({ id: id }, data => {
                        getTen(data)
                    })
                    break
            }
        }
        let getTen = data => {
            if (data.data.length === 0) {
                return
            }
            this.setState((prevState, props) => ({
                comments: data.data
            }))
        }
        arr[index].flag = !arr[index].flag
        this.setState((prevState, props) => ({
            base: arr
        }))
    }
    publicnumder(flag) {
        let data = {
            id: this.state.filter[this.state.block]
        };
        switch (this.props.skype) {
            case 1:
                u.getSkypeG(data, data => {
                    getListPage(data)
                })
                break
            case 2:
                u.getLineG(data, data => {
                    getListPage(data)
                })
                break
            case 3:
                u.getWhatsappG(data, data => {
                    getListPage(data)
                })
                break
            case 4:
                u.getViberG(data, data => {
                    getListPage(data)
                })
                break
        }
        let getListPage = (data) => {
            let list = data.data
            list.forEach((item) => {
                item.flag = false
                item.comments = [1, 1]
            })
            let arr = list
            this.setState((prevState, props) => ({
                base: arr,
            }))
        }
    }
    blockContent(index, val) {  //导航点击后的回调
        if (val || val == '') {
            if (val.trim() === '') return
            let arr = []
            this.state.names.filter((item) => {
                return item.conversationId.includes(val) ? arr.push(item.conversationId) : ''
            })
            this.setState((prevState, props) => ({
                filter: arr
            }))
        } else {
            this.setState((prevState, props) => ({
                block: index,
            }), () => {
                this.publicnumder(false)
            })
        }
    }
    getNameList() { //获取导航列表
        let getList = (data) => {
            let arr = []
            if (data.data.length == 0) return;
            data.data.forEach((item) => {
                arr.push(item.conversationId)
            })
            this.setState((prevState, props) => ({
                names: data.data,
                filter: arr,
            }), () => {
                this.publicnumder(false)
            })
        }
        switch (this.props.skype) {
            case 1:
                u.getSkypeGList(data => {
                    getList(data)
                })
                break
            case 2:
                u.getLineConversationId(data => {
                    getList(data)
                })

                break
            case 3:
                u.getWhatappList(data => {
                    getList(data)
                })
                break
            case 4:
                u.getViberConversationId(data => {
                    getList(data)
                })

                break
        }
    }
    render() {
        return (
            <div className='tero_father skype'>
                <Otheraddfour names={this.state.names} blockContent={this.blockContent.bind(this)} mynumber={this.state.mynumber} top={this.state.top} filter={this.state.filter} />
                <div className='nav_bb'>
                    <div className=''></div>
                    <div className='postbar'>
                        <div className='nav_b_left nav_bc_left' style={{ height: '100%', paddingRight: '30px' }}>
                            <div className='butt'>
                                <button style={{ backgroundColor: this.state.bgc == '1' ? "#5286ff" : "white", color: this.state.bgc == '1' ? "white" : "#5286ff", }} onClick={() => {
                                    this.publicnumder(false)
                                    this.setState((prevState, props) => ({
                                        bgc: "1"
                                    }))
                                }}>全部</button>
                                <button style={{ backgroundColor: this.state.bgc == '2' ? "#5286ff" : "white", color: this.state.bgc == '2' ? "white" : "#5286ff", }} onClick={() => {

                                    this.setState((prevState, props) => ({
                                        bgc: "2"
                                    }))
                                }}>搜索</button>
                                <div className={this.state.bgc == '2' ? 'basicSearch basicSearchactive' : "basicSearch"}>
                                    <Input placeholder="请输入搜索内容..." id='inapp' onKeyDown={(e) => {
                                        if (e.keyCode == 13) {
                                            this.getValue(e.target.value)
                                        }
                                    }} />
                                    <img src={require("../../static/image/search_icon1.png")} alt=""
                                        onClick={() => { this.getValue(document.querySelector("#inapp").value) }} />
                                </div>
                            </div>
                            <div className='nav_b_left_content' style={{ display: 'block' }}>
                                {
                                    this.state.base.length > 0 && this.state.base.map((item, index) => {
                                        return (
                                            <div className='nav_b_left_son' key={index} style={{ marginBottom: '20px' }}>
                                                <div className='nav_b_left_t'>
                                                    <img src={require('../../static/image/tou_two.png')} alt="" />
                                                </div>
                                                <div className='nav_b_left_t_son' style={{ paddingTop: '10px' }}><span style={{ color: '#5d6166' }}>{item.author || '宋中继'}</span><div className='nav_b_left_t_son_content'>{item.content || ''}</div>
                                                    <div className='nav_b_left_t_son_time'>
                                                        <span>{u.unixTime(Number(item.createdTime)) || '2018-07-30 22:13'}</span>
                                                        <div className='goog' style={{ textAlign: 'right' }} onClick={() => {
                                                            this.open(index, item.id)
                                                        }}>{item.flag ? '收起' : '展开上下10条'}</div>
                                                    </div>
                                                    <ul className={item.flag ? "comment" : ""}>
                                                        {
                                                            this.state.comments.map((itemm, index) => {
                                                                return (<li key={index}><div className='nav_b_left_t'><img src={require('../../static/image/tou_three.png')} alt="" /></div>
                                                                    <p style={{ width: '100%' }}><span>{itemm.username || '鲁达'}</span><div className={item.id === itemm.id?'nav_b_left_t_son_content':'nav_b_left_t_son_content ulcontent'}>{itemm.content || '问如果没有中国庞大市场的支撑随着美国政府贸易保护主义的不断加码?'}</div><span>{u.unixTime(Number(itemm.createdTime)) || '2018-07-30 22:13'}</span></p></li>)
                                                            })

                                                        }
                                                    </ul>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}




export default SkypeCommon